{% extends "panel/panel_base.html" %}
{% load thumb %}
{% block extra_head %}
<script type="text/javascript" src="{{MEDIA_URL}}js/jquery.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/autoselect.js"></script>
<link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/jquery.lightbox-0.5.css" media="screen" />

{% endblock %}
{% block panel_title%}Photo Gallery: {{ugallery.title|capfirst}}{% endblock %}
{% block panel_content %}
<strong>Date Added:</strong> {{ugallery.date_added|date}}<br />
<strong>Description:</strong> <br />{{ugallery.description}}<br />
<strong>Created By:</strong> {{ugallery.owner.first_name}} {{ugallery.owner.last_name}}<br />
<ul id="slideshow">
{% for i in images %}

	<li>
		<h3>{{i.title}}</h3>
		<span>{{i.image|thumbnail:"500x500"}}</span>
		<p>{{i.description}}</p>
		<a href="#"><img src="{{i.image|thumbnail:"125x75"}}" alt="{{i.title}}" /></a>
	</li>
{% endfor %}
</ul>

<div id="wrapper">
	<div id="fullsize">
		<div id="imgprev" class="imgnav" title="Previous Image"></div>
		<div id="imglink"></div>
		<div id="imgnext" class="imgnav" title="Next Image"></div>
		<div id="image"></div>
		<div id="information">
			<h3></h3>
			<p></p>
		</div>
	</div>
	<div id="thumbnails">
		<div id="slideleft" title="Slide Left"></div>
		<div id="slidearea">
			<div id="slider"></div>
		</div>
		<div id="slideright" title="Slide Right"></div>
	</div>
</div>
<script type="text/javascript" src="{{MEDIA_URL}}js/jquery.gallery.js"></script>
<script type="text/javascript">
	$('slideshow').style.display='none';
	$('wrapper').style.display='block';
	var slideshow=new TINY.slideshow("slideshow");
	window.onload=function(){
		slideshow.auto=true;
		slideshow.speed=5;
		slideshow.link="linkhover";
		slideshow.info="information";
		slideshow.thumbs="slider";
		slideshow.left="slideleft";
		slideshow.right="slideright";
		slideshow.scrollSpeed=4;
		slideshow.spacing=5;
		slideshow.active="#fff";
		slideshow.init("slideshow","image","imgprev","imgnext","imglink");
	}
</script>
<a class="def_link" href="http://fblaconnection.com/panel/{{user.username}}/gallery/{{ugallery.slug}}/">&larr;Back to Gallery</a><br />

{% endblock %}